<!-- 首页组件 -->
<template>
  <div class="home-view">
    <!-- 头部 -->
    <header :style="changebgColor" ref="header">
      <div class="search" @click="toSearch">
        搜索商品名称
        <i class="iconfont icon-sousuo"></i>
      </div>
      <i class="iconfont icon-IMliaotian chat"></i>
    </header>
    <!-- 导航 -->
    <div class="nav" :style="changebgColor" ref="nav">
      <!-- 导航 -->
      <ly-tabs v-model="value" activeColor="#fff" @change="changeTabFun">
        <ly-tab-item :name="navData.name" :title="navData.title" v-for="navData in navDatas" :key="navData.id" />
      </ly-tabs>
      <!-- 分类 -->
      <div class="category" @click="toCategory">
        <i class="iconfont icon-daohangfenlei"></i>
        <span>分类</span>
      </div>
    </div>
    <!-- 动态组件的切换 -->
    <!-- <component :is=""></component> -->
    <!-- 手动设置显示和隐藏  v-if v-show -->
    <!-- 主页面的组件 -->
    <HomeIndex v-show="showFlag" @bgEvent="bgEventFun" :showFlag="showFlag" />
    <!-- 分类组件 -->
    <HomeCategory v-if="!showFlag" :cat_id="cat_id" />
    <!-- <div style="height: 3000px; background: skyblue">额外的div</div> -->

    <!-- 客服内容 -->
    <div class="service">
      <div class="service_item">
        <a href="https://work.weixin.qq.com/kfid/kfc3a7d1259cb5f156f">
          <img src="https://x.dscmall.cn/storage/assets/admin/images/custom_jump_logo.png" />
        </a>
      </div>

      <div class="service_item">
        <a href="https://work.weixin.qq.com/kfid/kfc3a7d1259cb5f156f">
          <img src="https://x.dscmall.cn/storage/assets/admin/images/kefu_logo.png" />
        </a>
      </div>
      <div class="service_item" @click="showPopup">
        <img src="https://x.dscmall.cn/static/dist/img/03-share.png" />
      </div>
    </div>
    <!-- 分享的弹出内容 -->
    <van-popup v-model="show">
      <div class="img_share">
        <i class="iconfont icon-round_delete close" @click="closePopup"></i>
        <img src="https://x.dscmall.cn/storage/assets/admin/images/consult_share_img.png" alt="" />
        <div class="confirm-save">
          长按保存图片 <i class="iconfont icon-top-s"></i>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import HomeIndex from "./components/HomeIndex/HomeIndex.vue";
import HomeCategory from "./components/HomeCategory/HomeCategory.vue";
export default {
  name: "HomeView",
  //import引入的组件需要注入到对象中才能使用
  components: { HomeIndex, HomeCategory },
  data() {
    //这里存放数据
    return {
      navDatas: [
        { id: 1, name: "1", title: "首页", cat_id: "" },
        { id: 2, name: "2", title: "家用电器", cat_id: "858" },
        { id: 3, name: "3", title: "男装女装", cat_id: "6" },
        { id: 4, name: "4", title: "鞋靴箱包", cat_id: "8" },
        { id: 5, name: "5", title: "手机数码", cat_id: "3" },
        { id: 6, name: "6", title: "电脑办公", cat_id: "4" },
        { id: 7, name: "7", title: "家居家访", cat_id: "5" },
        { id: 8, name: "8", title: "个人化妆", cat_id: "860" },
        { id: 9, name: "9", title: "休闲运动", cat_id: "866" },
      ],
      // 点击的nav的属性值
      value: "1",
      showFlag: true,
      changebgColor: { background: "rgb(228, 49, 36)" },
      show: false,
      cat_id: ''
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 跳转到搜索页面
    toSearch() {
      // 记录该条路由的相关信息
      console.log(this.$route);
      // 控制路由的行为和动作;
      console.log(this.$router);
      this.$router.push("/searchview");
    },
    // 分类页面
    toCategory() {
      this.$router.push("/categoryview");
    },
    // 切换导航的tab时的事件
    changeTabFun(name) {
      console.log(name);
      if (name == "1") {
        this.showFlag = true;
      } else {
        this.showFlag = false;
        // 修改this.cat_id
        this.cat_id = this.navDatas[name - 1].cat_id;
        console.log(this.cat_id);
      }
    },
    bgEventFun(data) {
      this.changebgColor = data;
    },
    indexScroll() {
      // console.log("滚动了");
      if (document.documentElement.scrollTop > 90) {
        // console.log(this.$refs.header);
        // console.log(this.$refs.nav);
        this.$refs.header.className = "header-fixed";
        this.$refs.nav.className = "nav nav-fixed";
      } else {
        this.$refs.header.className = "";
        this.$refs.nav.className = "nav";
      }
    },
    showPopup() {
      this.show = true;
    },
    closePopup() {
      this.show = false;
    },
  },
  beforeCreate() { }, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  beforeMount() { }, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    document.addEventListener("scroll", this.indexScroll);
  },
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() {
    console.log("销毁");
    // 移除全局事件
    document.removeEventListener("scroll", this.indexScroll);
  }, //生命周期 - 销毁完成
  activated() {
    console.log("HomeView激活");
    document.addEventListener("scroll", this.indexScroll);
  }, //如果页面有keep-alive缓存功能，激活
  deactivated() {
    // 如果缓存组件,那么销毁时需要非激活中销毁全局事件
    console.log("HomeView非激活");
    document.removeEventListener("scroll", this.indexScroll);
  }, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
.home-view {

  // 首页的头部
  header {
    width: 100%;
    height: 5rem;
    background-color: rgb(228, 49, 36);
    position: relative;
    left: 0;
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;

    .search {
      // flex:1  --- flex-grow:1 flex-shrink:1 flex-basis:0%
      flex: 1;
      background-color: #fff;
      height: 3rem;
      border-radius: 1.43rem;
      font-size: 1.3rem;
      padding: 0 1rem 0 2rem;
      margin: 0 0.6rem 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #999;
    }

    .chat {
      color: #fff;
      font-size: 2rem;
    }
  }

  .header-fixed {
    background-color: rgb(228, 49, 36) !important;
    position: fixed;
  }

  // 导航
  .nav {
    width: 100%;
    height: 4rem;
    background-color: rgb(228, 49, 36);
    position: relative;
    left: 0;
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;

    // 导航
    .ly-tabs {
      width: 80%;
      height: 4rem;
      background-color: transparent;
      border-bottom: 0;

      .ly-tab-item {
        padding: 1rem 0.8rem;
      }

      .ly-tab-item[style="color: rgb(255, 255, 255);"] {
        font-weight: 700;
      }

      .ly-tabs__active-line {
        width: 1.2rem !important;
        height: 0.6rem !important;
        border-radius: ~"0 0 50% 50% / 0 0 100% 100%";
        left: 0.8rem;
        border: 0.2rem solid #fff;
        border-top: 0;
        background-color: transparent !important;
        box-sizing: border-box;
      }
    }

    .category {
      width: 19%;
      height: 2.5rem;
      line-height: 2.5rem;
      box-shadow: -6px 0 4px -4px rgba(0, 0, 0, 0.4);
      font-size: 1.4rem;

      i {
        margin: 0 0.5rem 0 0.5rem;
      }
    }
  }

  .nav-fixed {
    background-color: rgb(228, 49, 36) !important;
    position: fixed;
    top: 5rem;
    transition: top 0.5s;
  }

  // 客服
  .service {
    position: fixed;
    bottom: 18%;
    right: 10px;
    z-index: 999;

    .service_item {
      width: 58px;
      height: 58px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .van-popup {
    background-color: transparent;
    color: #fff;

    .img_share {
      i {
        display: block;
      }

      img {
        width: 30rem;
        height: 46.9rem;
      }

      .close {
        // float: right;
        margin: 1rem 0 1rem 28rem;
        font-size: 1.8rem;
      }

      .confirm-save {
        width: 30rem;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>